<template>
	<div>
		<div class="topTitle">经验管理</div>
		<el-form inline :model="query" label-width="80px">
			<el-form-item label="地区">
				<el-cascader :props="props" v-model="query.city" :options="areaData" placeholder="请选择地区"
					class="width260 margin-right10"></el-cascader>
			</el-form-item>
			<el-form-item label="科目">
				<el-select clearable placeholder="请选择科目" v-model="query.appid" class="width260 margin-right10">
					<el-option v-for="(item,index) in miniData" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="query.status" placeholder="请选择状态" class="width260 margin-right10">
					<el-option label="待审核" :value="0"></el-option>
					<el-option label="审核通过" :value="1"></el-option>
					<el-option label="审核驳回" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="来源">
				<el-select v-model="query.sourceStatus" placeholder="请选择来源" class="width260 margin-right10">
					<el-option label="原创" :value="0"></el-option>
					<el-option label="转载" :value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="标题">
				<el-input v-model="query.titleName" placeholder="请输入关键字" class="width260 margin-right10"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="margin-bottom20 row-me flex-end">
			<el-button type="primary" @click="paramsVisible=true">参数设置</el-button>
		</div>
		<el-table :data="tableData" border header-cell-class-name="table-header-style">
			<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
			<el-table-column label="标题" prop="titleName" width="400"></el-table-column>
			<el-table-column label="来源" prop="sourceName" align="center"></el-table-column>
			<el-table-column label="地区" prop="cityShi" align="center">
				<template slot-scope="{row}">
					<div class="row-me flex-wrap" v-if="row.areasShi&&row.areasShi.length!=0">
						<el-tag v-for="(item,index) in row.areasShi" :key="index" class="margin-right10">{{item.name}}</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="科目" prop="appidName" align="center"></el-table-column>
			<el-table-column label="是否关联机构/商品" align="center">
				<template slot-scope="{row}">
					<span v-if="row.organStatus==0">不关联</span>
					<span v-else-if="row.organStatus==1">关联机构</span>
					<span v-else-if="row.organStatus==2">关联商品</span>
					<span v-else-if="row.organStatus==3">关联专题</span>
				</template>
			</el-table-column>
			<el-table-column label="发布时间" prop="createTime" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="{row}">
					<span v-if="row.status==0">待审核</span>
					<span v-else-if="row.status==1">审核通过</span>
					<span v-else-if="row.status==2">审核驳回</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="text" @click="handleExamine(scope.row)" v-if="scope.row.status==0">审核</el-button>
					<el-button type="text" @click="handleEdit(scope.row,1)">详情</el-button>
					<el-button type="text" @click="handleEdit(scope.row,2)">编辑</el-button>
					<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDel(scope.row.id)">
						<el-button type="text" slot="reference">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 参数设置 -->
		<el-dialog title="参数设置" :visible.sync="paramsVisible" width="720px">
			<el-form>
				<el-form-item label="启用关联机构/商品">
					<el-radio-group v-model="organParams.value">
						<el-radio label="1">启用</el-radio>
						<el-radio label="0">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="经验首页排列方式">
					<el-radio-group v-model="sortParams.value">
						<el-radio label="1">按照昨天点击数</el-radio>
						<el-radio label="2">按照总点击数</el-radio>
						<el-radio label="3">按照实际点赞</el-radio>
						<el-radio label="4">按照浏览量排列</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="paramsVisible = false">取 消</el-button>
				<el-button @click="handleParamsSave" type="primary">确 认</el-button>
			</span>
		</el-dialog>

		<!-- 编辑详情 -->
		<el-dialog :title="title" :visible.sync="visible" width="60%">
			<el-form :model="form" label-width="140px" ref="form" :rules="rules">
				<el-form-item label="标题" prop="titleName">
					<el-input v-model="form.titleName" placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="img">
					<div class="row-me flex-warp flex-end2">
						<template v-if="form.img&&form.img.length!=0">
							<div v-for="(item,index) in form.img" :key="index" class="posRelative">
								<el-image class="width100 height100 radius6 margin-right10" :src="item"
									:preview-src-list="[item]"></el-image>
								<i class="el-icon-error posAbsolute font-size20" @click="form.img.splice(index,1)"
									style="right: 0;top: 0;"></i>
							</div>
						</template>
						<el-button type="text" @click="clickImg">点击图片库</el-button>
					</div>
				</el-form-item>
				<el-form-item label="内容" prop="comment">
					<el-input placeholder="请输入内容" v-model="form.comment" type="textarea" rows="12" class="width100Per"></el-input>
				</el-form-item>
				<div class="row-me flex-wrap">
					<el-form-item label="虚拟浏览量">
						<el-input placeholder="请输入虚拟浏览量" v-model="form.virtualNum" class="width260"></el-input>
					</el-form-item>
					<el-form-item label="自增设置">
						<div class="row-me">
							<el-switch v-model="form.addStatus" class="line-height40 margin-right20"></el-switch>
							<div class="row-me" v-if="form.addStatus">
								<el-input class="width120" placeholder="请输入" v-model="form.addMin"></el-input>
								<span class="margin-left5 margin-right5">~</span>
								<el-input class="width120" placeholder="请输入" v-model="form.addMax"></el-input>
								<el-select placeholder="每30分钟/每小时/每天" class="margin-left30 width200" v-model="form.addTime">
									<el-option label="每30分钟" :value="1"></el-option>
									<el-option label="每小时" :value="2"></el-option>
									<el-option label="每天" :value="3"></el-option>
								</el-select>
							</div>
						</div>
					</el-form-item>
				</div>
				<el-form-item label="来源">
					<div class="row-me row-center">
						<el-radio-group v-model="form.sourceStatus">
							<el-radio :label="0">原创</el-radio>
							<el-radio :label="1">转载</el-radio>
						</el-radio-group>
						<el-input placeholder="请输入转载来源" class="width260 margin-left20" v-model="form.sourceName"></el-input>
					</div>
				</el-form-item>
				<div class="row-me row-center">
					<el-form-item label="发布地区">
						<el-cascader :props="editProps" v-model="form.area" :options="areaData" placeholder="请选择地区"
							class="width260 margin-right10" @change="areaChange"></el-cascader>
					</el-form-item>
					<el-form-item label="科目">
						<el-select clearable placeholder="请选择科目" v-model="form.appid" class="width260">
							<el-option v-for="(item,index) in miniData" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="关联机构/商品/专题">
					<el-checkbox-group v-model="organStatusArr" @change="onChange">
						<el-checkbox :label="1">关联机构</el-checkbox>
						<el-checkbox :label="2">关联商品</el-checkbox>
						<el-checkbox :label="3">关联专题</el-checkbox>
					</el-checkbox-group>
					<el-select placeholder="请选择" filterable v-model="form.organId" v-if="form.organStatus==1">
						<el-option v-for="item in organAll" :key="item.id" :label="item.organName" :value="item.id"></el-option>
					</el-select>
					<el-select placeholder="请选择" filterable v-model="form.organId" v-else-if="form.organStatus==2">
						<el-option v-for="item in productAll" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
					<el-select placeholder="请选择" filterable v-model="form.organId" v-else-if="form.organStatus==3">
						<el-option v-for="item in subjectAll" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button @click="handleSave" type="primary" v-if="!isDetail">确 认</el-button>
			</span>
		</el-dialog>

		<!-- 审核 -->
		<el-dialog title="审核" :visible.sync="examineVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="审核状态">
					<el-select v-model="form.status" placeholder="审核状态" clearable class="width260">
						<el-option label="通过" :value="1"></el-option>
						<el-option label="驳回" :value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="examineVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleExamineSave">确 定</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			imgLibrary
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				pageTotal: 0,
				props: {
					emitPath: false,
					value: 'id',
					label: 'name',
					checkStrictly: true
				},
				editProps: {
					value: 'id',
					label: 'name',
					checkStrictly: true
				},
				areaData: [],
				miniData: [],
				paramsVisible: false,
				form: {},
				visible: false,
				isDetail: false,
				fileList: [],
				title: '',
				organStatusArr: [],
				organAll: [],
				productAll: [],
				subjectAll: [],
				params: {
					organ: null,
					sort: null
				},
				rules: {
					titleName: {
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					},
					img: {
						required: true,
						message: '请选择图片',
						trigger: 'change'
					},
					comment: {
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}
				},
				examineVisible: false,
				organParams: {
					value: null
				},
				sortParams: {
					value: null
				}
			}
		},
		mounted() {
			this.getAllArea()
			this.getAll()
			this.getOrganAll()
			this.getProduceData()
			this.getPageProduct()
			this.getData()
			this.getMiniApp()
			this.getByKey('exper_organ', 'organ')
			this.getByKey('exper_sort', 'sort')
		},
		methods: {
			async getMiniApp() {
				const res = await this.$postForm('/admin/minis/getMiniApp')
				if (res.code == 1000) {
					// this.vodSubAppid = res.data.vodSubAppid || ''
					// this.vodId = res.data.id
				}
			},
			async handleExamineSave() {
				if (this.$.isEmpty(this.form.status)) {
					this.$message.warning('请选择审核状态!')
					return
				}
				const res = await this.$post('/admin/experiences/experienceUpdate', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.examineVisible = false
					this.getData()
				}
			},
			handleExamine(row) {
				this.form.id = row.id
				this.examineVisible = true;
			},
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show(1)
			},
			//获取选中的图片
			handleImgOk(data) {
				this.$set(this.form, 'img', [...this.form.img, ...data])
			},
			//地区变动
			areaChange(val) {
				this.form.citySheng = ''
				this.form.cityShi = ''
				if (val.length != 0) {
					this.form.citySheng = val[0]
					this.form.cityShi = val[1]
				}
			},
			//参数设置
			handleParamsSave() {
				this.configUpdate('exper_organ')
				this.configUpdate('exper_sort')
			},
			//获取系统参数
			async getByKey(key) {
				const res = await this.$get('/admin/config/getByKey', {
					key
				})
				if (res.code == 1000) {
					if (key == 'exper_organ') {
						this.organParams = res.data
					} else {
						this.sortParams = res.data
					}
				}
			},
			//设置系统参数
			async configUpdate(keyword) {
				let params = this.sortParams
				if (this.sortParams.type.value) {
					this.sortParams.type = this.sortParams.type.value
				}
				if (keyword == 'exper_organ') {
					params = this.organParams
					if (this.organParams.type.value) {
						this.organParams.type = this.organParams.type.value
					}
				}
				const res = await this.$post('/admin/config/update', params)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.paramsVisible = false
					if (keyword == 'exper_organ') {
						this.getByKey('exper_organ')
					} else {
						this.getByKey('exper_sort')
					}
				}
			},
			//获取机构下拉
			async getOrganAll() {
				const res = await this.$postForm('/admin/messages/organAll', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.organAll = res.data.list
				}
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = this.$.getTreeData(res.data)
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
			//确认编辑
			handleSave() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.form.citySheng = this.form.citySheng ? this.form.citySheng.toString() : ''
						this.form.cityShi = this.form.cityShi ? this.form.cityShi.toString() : ''
						this.form.addStatus = this.form.addStatus ? 1 : 0
						this.form.img = this.form.img.toString()
						this.$post('/admin/experiences/experienceUpdate', this.form).then(res => {
							if (res.code == 1000) {
								this.$message.success('操作成功')
								this.getData()
								this.visible = false
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//编辑详情
			handleEdit(row, type) {
				if (type == 1) {
					this.title = '详情'
					this.isDetail = true
				} else {
					this.title = '编辑'
					this.isDetail = false
				}
				this.form = JSON.parse(JSON.stringify(row))
				if (this.form.img) {
					this.form.img = this.form.img.split(',') || []
				}
				this.form.addStatus = this.form.addStatus ? true : false
				this.organStatusArr = this.form.organStatus ? [this.form.organStatus] : []
				this.visible = true
			},
			//关联机构/商品/专题
			onChange(val) {
				if (val.length > 1) {
					val.splice(0, 1)
				}
				this.form.organStatus = val.toString()
				this.form.organId = ''
			},
			//获取专题下拉
			async getPageProduct() {
				const res = await this.$get('/admin/specialSubject/pageSubject', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.subjectAll = res.data.list
				}
			},
			//获取商品下拉
			async getProduceData() {
				const res = await this.$get('/admin/mall/pageProduct', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.productAll = res.data.list
				}
			},
			//获取数据
			async getData() {
				const res = await this.$postForm(
					`/admin/experiences/experienceAll?pageNumber=${this.query.pageNumber}&pageSize=${this.query.pageSize}`,
					this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//分页
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			//删除
			async handleDel(id) {
				const res = await this.$postForm('/admin/experiences/experienceDeleted', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			//搜索
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			//重置
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			//获取所有科目
			async getAll() {
				const res = await this.$get('/admin/minis/getAll')
				if (res.code == 1000) {
					this.miniData = res.data
				}
			},
		}
	}
</script>

<style>
</style>